<template>
  <div class="page">
    <global-header title="游戏数据" @back="$router.back()" />
    <main class="page-main flex flex-col justify-between">
      <ul
        class="flex justify-between items-center h-[50px] text-[14px] border-bottom px-[15px] bg-white"
      >
        <li class="flex-1 w-0">用户名</li>
        <li class="flex-1 w-0 text-center">余额</li>
        <li class="flex-1 w-0 text-center">下注金额</li>
        <li class="flex-1 w-0 text-center">上期盈亏</li>
      </ul>
      <div class="grow-[1] h-0 overflow-y-auto">
        <div class="bg-white">
          <scroll-list
            emptyImage
            v-model:loading="state.loading"
            v-model:refresh="state.refresh"
            :finished="state.finished"
            :length="list.length"
            @load="load"
          >
            <template v-for="item in list">
              <DataDetailItem :item="item" />
            </template>
          </scroll-list>
        </div>
      </div>
    </main>
  </div>
</template>
<route>
  {
    name: "admin-main-data-detail",
    meta: {
      pageIndex: 4,
    }
  }
</route>
<script setup lang="ts">
import { reqGameTotalDetail } from "@/api/main";
import DataDetailItem from "./components/data-detail-item.vue";
import { useList } from "@/hooks/useList";

type DetaimMo = GameTotalMo["Children"][0];

const route = useRoute();

// 获取列表
const { state, list, getData, load } = useList<DetaimMo, {}>(reqGameTotalDetail, () => ({
  LotteryId: route.query.id as string
}));

onMounted(() => {
  getData();
});
</script>
